<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="/web/js/global/global_header.js"></script>
    <title>华锐Pms</title>
</head>
<style>
    .is-border {
        border: 1px solid #fa0;
    }

    .el-alert--warning.is-light {
        color: #333;
    }

    .el-alert__title {
        font-size: 14px;
    }

    .strat-center {
        width: 168px;
        height: 52px;
        border: 1px solid #e0e0e0;
        background: #fff;
        border-radius: 2px;
        padding-right: 8px;
        position: relative;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .strat-center:hover {
        border: 1px solid #053dc8;
        cursor: move
    }

    .edit-icon:hover i {
        color: #053dc8 !important;
    }

    .el-icon-check {
        color: #7ed322;
    }

    .el-icon-close {
        color: red;
    }

    .del-icon:hover i {
        color: red !important;
    }

    .el-color-picker__trigger {
        padding: 0;
        border: 0;
        height: 24px;
        width: 24px;
    }

    .absolute {
        position: absolute;
    }
</style>

<body>
    <div id="app" class="bgc-f2 pl-24 pr-16 pt-16" v-cloak>
        <div>
            <div class="bor-fa bgc-ff mb-25 pl-16 pa-18-16 tx-14">渠道均可直接拖动排序，默认项仅支持修改颜色，新增项支持修改名称及颜色</div>
            <div class="ub ub-ac ub-pe mb-16">
                <div>
                    <!-- v-haspermi="['system:user:add']" -->
                    <el-button type="primary" size="small" class="tx-14" @click="addData()">新增渠道</el-button>
                </div>
            </div>
            <div>
                <draggable chosen-class="chosen" :scroll="true" force-fallback="true" animation="150"
                    class="ub ub-wrap">
                    <div class="strat-center ub ub-ac mr-16 mb-16 ovh" v-for="(item, index) in list" :key="item.id">
                        <template>
                            <div><span class="iconfont icon-tuozhuai tx-w tx-20 ml-5"></span></div>
                            <div class="uwh-24 ovh ml-3">
                                <el-color-picker v-model="item.colour" show-alpha :predefine="predefineColors">
                                </el-color-picker>
                            </div>
                            <div class="ml-10 ub-f1">{{ item.name }}</div>
                            <div class="absolute tx-wh tx-c tx-12"
                                style="height: 18px; line-height: 18px; width: 56px; background: rgb(5, 61, 200); transform: rotate(45deg) scale(0.9); top: 3px; right: -16px;">
                                默认
                            </div>
                        </template>
                    </div>
                    <div class="ub ub-wrap">
                        <div class="strat-center ub ub-ac mr-16 mb-16 pl16" v-for="(item, index) in bstChannel"
                            :key="item.id">
                            <template v-if="item.edit">
                                <div class="ub-f1 ">
                                    <el-input v-model="item.name"></el-input>
                                </div>
                                <i class="el-icon-check tx-w cup ml-8"></i>
                                <div class="el-divider el-divider--vertical ml-4 mr-4"></div>
                                <i class="el-icon-close tx-w cup" @click="delData(item,index,1)"></i>
                            </template>
                            <template v-else>
                                <div><span class="iconfont icon-tuozhuai tx-w tx-20 ml-5"></span></div>
                                <div class="uwh-24 ovh ml-3">
                                    <el-color-picker v-model="item.colour" show-alpha :predefine="predefineColors">
                                    </el-color-picker>
                                </div>
                                <div class="ub-f1 ml-5">{{item.name}}</div>
                                <div class="tx-18 tx-99 cup edit-icon">
                                    <i class="el-icon-edit" @click="editData(item)"></i>
                                </div>
                                <div class="tx-18 tx-99 ml-8 mr-2 cup  del-icon">
                                    <el-popconfirm title="删除后不再显示该项目，确定要删除吗？" @confirm="delData(item,index,2)">
                                        <i class="el-icon-delete" slot="reference"></i>
                                    </el-popconfirm>
                                </div>
                            </template>
                        </div>
                </draggable>

            </div>
        </div>
    </div>
    <script type="text/babel">
        window.vm = new Vue({
            el: '#app',
            data: {
                colour: 'rgb(51, 51, 51)',
                predefineColors: [
                    '#ff4500',
                    '#ff8c00',
                    '#ffd700',
                    '#90ee90',
                    '#00ced1',
                    '#1e90ff',
                    '#c71585',
                    'rgba(255, 69, 0, 0.68)',
                    'rgb(255, 120, 0)',
                    'hsl(181, 100%, 37%)',
                    'hsla(209, 100%, 56%, 0.73)',
                    '#c7158577'
                ],
                list: [],
                bstChannel: [
                    {
                        id: '10',
                        name: 'zhangs',
                        colour: '#c71585'
                    },
                    {
                        id: '15',
                        name: 'zls',
                        colour: '##90ee90'
                    }
                ],
            },

            beforeCreate() {
                // top.vm.startLoading("加载中")
            },
            created() {
                this.init();
            },
            methods: {
                init() {
                    this.startLoading();
                    this.GET({ url: top.Config.curUrl + "/bst/bstChannel/list", map: this.params }).then((res) => {
                        if (res.retcode == 200) { //如果返回码不是200则提示错误登录信息
                            res.result.bstChannelList.filter(item => item.edit = false)
                            this.list = res.result.bstChannelList;
                        } else { //如果返回码是200则登录成功
                            this.msgError(res.retmsg)
                        }
                        this.closeLoading();
                    })
                },
                addData() {
                    this.bstChannel.push({
                        name: "",
                        edit: true
                    })
                },
                editData(item) {
                    item.edit = true;
                },
                delData(item, index, type) {
                    // 取消编辑
                    if (type == 1) {
                        if (item.id) {
                            item.edit = false;
                            item.name = this.bstChannel.filter(d => d.id == item.id)[0].name;
                        } else {
                            this.tableData.splice(index, 1)
                        }
                    }
                },
            }
        })
    </script>
</body>

</html>